<template>
  <view class="container" @click.stop="onClick">
    <!-- <image class="cover" :src="poi.mainPhoto" mode="aspectFill" /> -->
    <view class="poi-title">{{ poi.poiTitle }}</view>
    <view class="describe">{{ poi.introduction }}<uni-icons type="right" size="12" color="#848891"></uni-icons></view>
    <view class="business-address" v-if="poi.businessHours">
      <text>营业时间：</text>
      <text class="content">{{ poi.businessHours }}</text>
    </view>
    <view class="business-address" v-if="poi.address">
      <text>入园地址：</text>
      <text class="content">{{ poi.address }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    poi: {
      type: Object,
    }
  },
  data() {
    return {}
  },
  methods: {
    onClick() {
      uni.navigateTo({
        url: '/ai/pages/POIDetail/index?poiId=' + this.poi.poiId
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin-bottom: 40rpx;

  .cover {
    align-self: stretch;
    height: 150rpx;
    background: #D8D8D8;
    width: unset;
    border-radius: 5rpx;
  }

  .poi-title {
    font-size: 36rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #4D566A;
    line-height: 36rpx;
    margin-top: 20rpx;
  }

  .describe {
    margin: 20rpx 0;
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #848891;
    line-height: 34rpx;
    @include maxLine(2)
  }

  .business-address {
    margin-bottom: 6rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    line-height: 34rpx;
    color: #848891;

    .content {
      color: #4D566A;
    }
  }
}
</style>